<template>
  <el-dialog v-model="visible" title="提现审批" :close-on-click-modal="false">
    <el-descriptions title="订单信息">
      <el-descriptions-item label="商品名称">{{dataForm.orderInfo.prodName}}</el-descriptions-item>
      <el-descriptions-item label="商品金额">{{dataForm.orderInfo.total}}</el-descriptions-item>
      <el-descriptions-item label="总金额">{{dataForm.orderInfo.actualTotal}}</el-descriptions-item>
    </el-descriptions>

    <el-table :data="dataForm.orderInfo.orderItems" style="margin-bottom: 45px;">
      <el-table-column label="商品图片" width="180" >
        <template #default="scope">
          <div>
            <img
              alt=""
              :src="resourcesUrl + scope.row.pic"
              style="height:100px;width: 100px;"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prodName" label="商品名称" width="180" />
      <el-table-column prop="price" label="商品价格" />
      <el-table-column prop="prodCount" label="购买数量" />
      <el-table-column prop="productTotalAmount" label="购买总金额" />
    </el-table>


    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
      @keyup.enter="onSubmit()"
    >

      <el-form-item label="审批结果" prop="result">
        <el-radio-group v-model="dataForm.result">
          <el-radio :label="0"> 通过 </el-radio>
          <el-radio :label="1"> 驳回 </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="发票图片" prop="invoiceImgUrl" v-if="dataForm.result == 0">
          <mul-pic-upload v-model="dataForm.invoiceImgUrl" />
      </el-form-item>

      <el-form-item label="驳回原因" prop="rejectReason" v-if="dataForm.result == 1">
        <el-input
          v-model="dataForm.rejectReason"
          placeholder="驳回原因"
          type="textarea"
          :rows="2"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL;
const emit = defineEmits(["refreshDataList"]);

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});

const dataForm = ref({
  id: "",
  orderNumber:"",
  orderInfo:{},
  result: 0,
  rejectReason: "",
  invoiceImgUrl:""
});

const dataRule = {
  result: [{ required: true, message: "审批结果 不能为空", trigger: "blur" }],
  rejectReason: [
    //{ required: true, message: "添加数量不能为空", trigger: "change" },
    //Vue中自定义校验
    {
      validator: (rule, value, callback) => {
        if ((dataForm.value.result == 1 && dataForm.value.rejectReason == '')) {
          callback(new Error("必须填写驳回原因"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  invoiceImgUrl: [
    //{ required: true, message: "添加数量不能为空", trigger: "change" },
    //Vue中自定义校验
    {
      validator: (rule, value, callback) => {
        if ((dataForm.value.result == 0 && dataForm.value.invoiceImgUrl == '')) {
          callback(new Error("必须上传发票"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};
const visible = ref(false);
const dataFormRef = ref(null);
const init = (row) => {
  visible.value = true;
  dataForm.value.id = row.id;
  dataForm.value.orderNumber = row.orderNumber;
  //this.$set(dataForm.value, "id", id);
  nextTick(() => {
    //dataFormRef.value?.resetFields();
  });

  if (dataForm.value.orderNumber) {
    http({
      url: http.adornUrl(`/order/order/orderInfo/${dataForm.value.orderNumber}`),
      method: "get",
      params: http.adornParams(),
    }).then(({ data }) => {
      dataForm.value.orderInfo=data;
    });
  }
};
defineExpose({ init });

const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl("/shop/invoice/approval"),
        method: "post",
        data: http.adornData({
          id: dataForm.value.id,
          result: dataForm.value.result,
          rejectReason: dataForm.value.rejectReason,
          invoiceImgUrl:dataForm.value.invoiceImgUrl
        }),
      }).then(() => {
        ElMessage({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            visible.value = false;
            emit("refreshDataList", page);
          },
        });
      });
    }
  });
});
</script>
